import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'umi'
import { Page } from 'components'
import styles from './index.less'
import { Avatar, Descriptions } from 'antd'
import { t } from "@lingui/macro"

@connect(({ userDetail }) => ({ userDetail }))
class UserDetail extends PureComponent {
  render() {
    const { userDetail } = this.props
    const { data } = userDetail
    return (
      <Page inner>
        {/*<div className={styles.content}>{content}</div>*/}
        <Descriptions title={t`User Info`}>
          {/*{content}*/}
          <Descriptions.Item label={t`ID`}>{data.id}</Descriptions.Item>
          <Descriptions.Item label={t`Username`}>{data.username}</Descriptions.Item>
          <Descriptions.Item label={t`Nickname`}>{data.nickname}</Descriptions.Item>
          <Descriptions.Item label={t`Avatar`}><Avatar src={<img src={data.avatar} alt="avatar" />} /></Descriptions.Item>
          <Descriptions.Item label={t`Real Name`}>{data.realName}</Descriptions.Item>
          <Descriptions.Item label={t`Phone`}>{data.phone}</Descriptions.Item>
          <Descriptions.Item label={t`Sex`}>{data.sex}</Descriptions.Item>
          <Descriptions.Item label={t`Age`}>{data.age}</Descriptions.Item>
          <Descriptions.Item label={t`Email`}>{data.email}</Descriptions.Item>
          {/*<Descriptions.Item label={t`Role IDs`}>{data.roleIds}</Descriptions.Item>*/}
          <Descriptions.Item label={t`UpdatedTime`}>{data.updatedTime}</Descriptions.Item>
          <Descriptions.Item label={t`CreatedTime`}>{data.createdTime}</Descriptions.Item>
        </Descriptions>
      </Page>
    )
  }
}

UserDetail.propTypes = {
  userDetail: PropTypes.object,
}

export default UserDetail
